<template>
   <div>
       <!-- 表单 :model="form"  -->
       <el-form ref="form" :model="SpuInfo" label-width="80px">
           <!-- 1 -->
           <el-form-item label="spu名称">
               <el-input v-model='SpuInfo.spuName'></el-input>
           </el-form-item>
           <!-- 2 -->
           <el-form-item label="品牌">
               <el-select v-model='SpuInfo.tmId' placeholder="请选择品牌">
                   <el-option :label="tm.tmName" :value="tm.id" v-for="(tm,index) in TrademarkList" :key='tm.id'></el-option>
               </el-select>
           </el-form-item>
           <!-- 3 -->
           <el-form-item label="spu描述">
           <el-input type="textarea" rows='4' placeholder="spu描述" v-model="SpuInfo.description"></el-input>
           </el-form-item>
           <!-- 4  照片墙 upload -->
           <el-form-item label="spu图片">
               <el-upload
                action="/dev-api/admin/product/fileUpload"
                list-type="picture-card"
                :file-list="ImageList"
                :on-success="imagesuccess"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                >
                <i class="el-icon-plus"></i>
                </el-upload>
                <!-- 点击放大的小按钮放大图片 -->
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
           </el-form-item>
           <!-- 5 -->
           <el-form-item label="销售属性">
               <!-- 下拉框 -->
               <el-select v-model="attrIdAndName" :placeholder="unselectasleAttrList.length==0? '么有可以选择的了' :`还未选择 ${unselectasleAttrList.length} 个`">
                  
                   <el-option :label="SaleAttr.name" :value="`${SaleAttr.id}:${SaleAttr.name}`" v-for="(SaleAttr,index) in unselectasleAttrList" :key="SaleAttr.id"></el-option>
               </el-select>
               <!-- 按钮 -->
               <el-button type="primary" icon="el-icon-plus" size="mini" @click="addSpuSaleAttr" :disabled='!attrIdAndName'>添加销售属性</el-button>
               <!-- 表格 -->
               <el-table border :data="SpuInfo.spuSaleAttrList" style="width: 100%">
                   <el-table-column type="index" label="序号" width="80px" align="center"> </el-table-column>
                   <el-table-column prop="saleAttrName" label="属性名" width="300px" align="center"> </el-table-column>
                   <el-table-column prop="prop" label="属性值名称"  align="center"> 
                       <template slot-scope="{row,$index}">
                        
                          <el-tag :key="tag.id" v-for="(tag,index) in row.spuSaleAttrValueList" closable :disable-transitions="false" @close="row.spuSaleAttrValueList.splice($index,1)" style="margin:10px" >  {{tag.saleAttrValueName}}</el-tag>
                           
                            <el-input class="input-new-tag"  @blur="handleInputConfirm(row)"  @keyup.enter.native="handleInputConfirm(row)" v-if="row.inputVisible" v-model="row.inputValue"  ref="saveTagInput" size="small" ></el-input>
                           
                            <el-button v-else class="button-new-tag" size="small" @click="showInput(row)">添加属性值</el-button>
                       </template>
                   </el-table-column>
                   <el-table-column label="操作" width="300px" align="center">
                       <template slot-scope="{row,$index}">
                       <el-button type="primary" size="mini" @click="SpuInfo.spuSaleAttrList.splice($index,1)">删除</el-button>
                       </template>
                    </el-table-column>
               </el-table>
           </el-form-item>
           <!-- 6 -->
           <el-form-item >
                <el-button type="success" @click="addOrUpdateSpu" :disabled='!SpuInfo.spuSaleAttrList.length>0'>保存</el-button>
                <el-button type="primary" @click="cancel" >取消</el-button>
           </el-form-item>
       </el-form>
   </div>
</template>

<script>
export default {
    name:'SpuFrom',
    data(){
        return {
            dialogVisible:false,
            dialogImageUrl:"",
            // 现在是在先做修改,下面这个字段是空对象,所以要向服务器发送请求(传递id),获取整个对象,赋值给下面的字段
            // 但在做修改的同时,也要考虑添加,添加需要收集传递给服务器的字段,下面的对象中要初始化字段
            SpuInfo:{//类的信息
                category3Id: 0,
                description: "", //类的描述
                spuName: "", //spu 类的名字
                tmId: '',//品牌id
                spuImageList: [],//某一和类的图片信息
                spuSaleAttrList: [],//已选销售属性值
            },
            TrademarkList:[],//品牌名称
            ImageList:[],//spu类的图片类型
            saleAttrList:[],//品牌销售属性
             //收集销售属性ID和销售属性名,但是到时候用不用不确定
            attrIdAndName:'',
        }
        
    },
 
    methods: {
            //------------------------------图片信息收集-ImageList-----------------------------------------------
            //删除图片的回调
            handleRemove(file, fileList) {
                // console.log(file, fileList);
                // file 是删除的图片信息 fileList是剩下的没有删除的图片信息
                // 照片删除成功后,收集剩余照片
                this.ImageList=fileList
            },
            //   添加照片成功的回调
            imagesuccess(res,file,fileList){
                // 图片上传成功后,收集所有照片
                this.ImageList=fileList
            },
            //   处理照片墙,点击放大图片,弹出框放大图片的函数,处理图片地址,及弹出框是否显示与隐藏
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            //----------------------------------请求----------------------------------------------
            //子组件函数,父组件通过ref调用子组件中的函数,发送请求
            async initSpuFormData(spu,category3Id){
                // 收集category3Id
                this.SpuInfo.category3Id = category3Id;
                //   获取类的数据----id
                let SpuInfoResult=await this.$API.spu.reqSpuInfo(spu.id)
                if(SpuInfoResult.code==200){
                    this.SpuInfo=SpuInfoResult.data
                }
            
                // 获取某一类的图片信息
                let ImageListResult=await this.$API.spu.reqImageList(spu.id)
                if(ImageListResult.code==200){
                    let listArr=ImageListResult.data
                    listArr.forEach((item)=>{
                        item.name=item.imgName
                        item.url=item.imgUrl
                    })
                    //进行数组替换,变为响应式数据
                    this.ImageList=listArr
                }
                // 获取平台销售属性值
                let SaleAttrListResult=await this.$API.spu.reqSaleAttrList()
                if(SaleAttrListResult.code==200){
                    this.saleAttrList=SaleAttrListResult.data
                }
                //    获取品牌的数据
                let TrademarkResult=await this.$API.spu.reqTrademarkLiist()
                if(TrademarkResult.code==200){
                    this.TrademarkList=TrademarkResult.data
                }
            },
            // 父组件点击添加spu按钮,触发子组件中的函数,发送请求获取数据
            async initAddFormData(category3Id){
                console.log(8888);
                this.SpuInfo.category3Id=category3Id
                 // 获取平台销售属性值
                let SaleAttrListResult=await this.$API.spu.reqSaleAttrList()
                if(SaleAttrListResult.code==200){
                    this.saleAttrList=SaleAttrListResult.data
                }
                //    获取品牌的数据
                let TrademarkResult=await this.$API.spu.reqTrademarkLiist()
                if(TrademarkResult.code==200){
                    this.TrademarkList=TrademarkResult.data
                }
            },
            //----------------------------------销售属性收集------------------------------------------------------------
            //    {
            //     baseSaleAttrId:'',
            //     saleAttrName:'',
            //     spuSaleAttrValueList:[]
            //     } 销售属性名和id已经通过拼接的形式获取到了
            //点击添加销售属性按钮,将id和名包在对象中添加到SpuInfo中
            addSpuSaleAttr(){
                // 将收集的id和name分开
                let [baseSaleAttrId,saleAttrName] = this.attrIdAndName.split(':')
                // 定义一个对象,内容是和上传服务器的k一致
                let saleAttrObj={
                    baseSaleAttrId:baseSaleAttrId,
                    saleAttrName:saleAttrName,
                    spuSaleAttrValueList:[]
                }
                // 将定义的对象push到spuInfo中的要上传到浏览器的数组中
                this.SpuInfo.spuSaleAttrList.push(saleAttrObj)
                // 清空数据
                this.attrIdAndName=''
            },
            //---------------------------------销售属性值table表格------------------------------------------------------------------
            // 点击添加销售属性值按钮
            showInput(row){
                // 点击添加销售属性值按钮,要显示input框,所有要为row添加一个控制显示和隐藏的属性,由于row是响应式的,为响应式的数据添加属性用到$set
                this.$set(row,'inputVisible',true);
                // input 中收集的数据也要响应式保存在变量中,所以添加变量
                this.$set(row,'inputValue','')
                // 自动聚焦
                this.$nextTick(()=>{
                  this.$refs.saveTagInput.focus();
                })
            },
            // input失去焦点事件
            handleInputConfirm(row){
                const {baseSaleAttrId,inputValue}=row
                //失去焦点隐藏input前,判断用户输入是否合法
                if(inputValue.trim()==''){
                    this.$message('不能输入空数据')
                    return
                }
                let noRepeat=row.spuSaleAttrValueList.every((item)=>{
                  return item.saleAttrValueName != inputValue
                })
                // 如果不重复,将用户输入与当前销售属性id按照服务器接收格式定义在一个对象中,push到属性值列表[spuSaleAttrValueList]数组中
                if(noRepeat){
                    let  newSaleValue={
                        baseSaleAttrId:baseSaleAttrId,
                        saleAttrValueName:inputValue
                    }
                    // row是当前销售属性,将定义的对象push到当前销售属性的spuSaleAttrValueList数组中
                    row.spuSaleAttrValueList.push(newSaleValue)
                    //失去焦点,隐藏input
                    row.inputVisible=false
                }else{
                    this.$message('不能重复')
                }
            },
            //--------------------------------------点击保存按钮-----进行数据整理,最后上交给服务器-------------------------------------------------------------------
            //点击保存按钮
            async addOrUpdateSpu(){
                //整理参数  ImageList  SpuInfo
                const {ImageList,SpuInfo} = this
                //带给服务器图片的字段收集 {imageName||imageUrl}
                //已有图片自带ID，但是新的图片不需要带id
                // 整理需要带给服务器的图片列表信息
                SpuInfo.spuImageList=ImageList.map((item)=>{
                  return {
                      imgName:item.name,
                      imgUrl:(item.response&&item.response.data) || item.url
                  }
                })
                // 发送请求  可能是修改|添加
                let result = await this.$API.spu.reqAddOrUpdateSpu(SpuInfo)
                if(result.code==200){
                    // 请求成功 切换页面
                    // 利用自定义事件
                    this.$emit('save',{scene:0,flag:SpuInfo.id ? '修改' :'添加'})
                }
                // 点击保存在点击添加数据依旧存在,所以清空数据
                Object.assign(this._data,this.$options.data())
            },
            // 点击取消页面跳转,清空数据
            cancel(){
                this.$emit('changeScence',0)
                 // 清空数据
                Object.assign(this._data,this.$options.data())
            },
            //-------------------------------------点击删除删除数据-----------------------------------------------------------------------------------------------

    },
    
    computed: {
        // 计算未选择的销售属性
        unselectasleAttrList(){
        //从全部销售属性里面（3）筛选出两个销售属性
        //一共销售属性：颜色、版本、尺寸           SPU:[尺寸]
           return this.saleAttrList.filter(item=>{
             return  this.SpuInfo.spuSaleAttrList.every(item1=>{
                   return item.name!=item1.saleAttrName;
               })
           })
        }
    }
}
</script>

<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>